<template>
	<div>
		<h1 class="title">微店管理</h1>
		<ul class="menu">
			<li class="menu-item" :class="{'active':current === index}" v-for="(item,index) in menuList" @click="changeTab(index)">
				{{item}}
			</li>
		</ul>
		<small-shop v-if="current === 0" :data="this.data"></small-shop>
		<add-commodity v-if="current === 1" :data="this.data"></add-commodity>
		<commodity-m v-if="current === 2" :data="this.data"></commodity-m>
		<order-m v-if="current === 3" :data="this.data"></order-m>
		<freight-m v-if="current === 4" :datas="this.data"></freight-m>
	</div>
</template>
<script type="text/javascript">
	import smallShop from './components/smallShop'
	import commodityM from './components/commodityM'
	import orderM from './components/orderM'
	import addCommodity from './components/addCommodity'
	import freightM from './components/freightM'
	export default{
		name : 'MicroShop',
		props: ['froms','data'],
		data(){
			return {
				menuList : [
					'小店概况',
					'添加商品',
					'商品管理',
					'订单管理',
					'运费管理'
				],
				current : 0
			}
		},
		created(){			
			if(this.froms === 'marketAct'){
				this.current = 1;
			}
		},
		methods:{
			changeTab(index){
				this.current = index
			}
		},
		components:{
			smallShop,
			commodityM,
			orderM,
			addCommodity,
			freightM
		}
	}
</script>
<style lang="less" scoped>
	.title{
			margin-top: -1px;
			text-align: left;
			font-size: 34px;
			color: #000;
			font-weight: 500;
			padding: 38px 0 28px 72px;
			border-top: 1px solid #cdcdcd;
			border-bottom: 1px solid #cdcdcd;
	}
	.menu{
		overflow: hidden;
		list-style: none;
		background: #f6f8f9;
		border-bottom: 1px solid #cdcdcd;
	}
	.menu .menu-item{
		float: left;
		margin-top: 10px;
		margin-left: 15px;
		height: 40px;
		line-height: 40px;
		cursor: pointer;
	}
	.active{
		color: #1a90ea;
		border-bottom: 2px solid #1a90ea;
	}
</style>